<template>
  <div class="tabListControl">
    <div class="control-head">
      <p class="section-name">选项卡文字</p>
      <p class="reset" @click="resetTabList">重置</p>
    </div>
    <div class="tabListBox">
      <div class="tabList" @dragover.prevent>
        <div
          :class="['tabItem', choosedItem === item ? 'choosed' : '']"
          v-for="(item, index) in list"
          :key="index"
          @click.stop="chooseTab(item, index)"
          v-dragging="{
            item: item,
            list: list,
            group: 'tabList',
          }"
        >
          <span class="tabName">{{ item.text }}</span>
          <div class="options">
            <div class="sort">
              <i
                :class="[
                  'iconfont',
                  'icon-paixushang',
                  index == 0 ? 'disabled' : '',
                ]"
                @click.stop="sort('up', index)"
              ></i>
              <i
                :class="[
                  'iconfont',
                  'icon-paixuxia',
                  index == list.length - 1 ? 'disabled' : '',
                ]"
                @click.stop="sort('down', index)"
              ></i>
            </div>
            <div class="del" @click.stop="deleteTab(index)">
              <i class="iconfont icon-mokuai-shanchu"></i>
            </div>
          </div>
        </div>
      </div>
      <div class="addTab" @click="addTab">
        <i class="iconfont icon-jiahao"></i>
        <span>添加选项卡</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "tabListControl",
  props: {
    list: {
      type: Array,
      default: [],
    },
  },
  data() {
    return {
      choosedIndex: -1,
      choosedItem: {},
    };
  },
  methods: {
    resetTabList() {
      this.$emit("reset");
    },
    dropToPreview(e) {
      console.log(e);
    },
    chooseTab(item, index) {
      console.log(item, index);
      if (this.choosedIndex == index) {
        return;
      }
      this.choosedIndex = index;
      this.$emit("chooseTab", item);
      this.choosedItem = item;
      console.log(this.choosedIndex);
    },
    // 按图标排序
    sort(type, index) {
      if (type == "up") {
        if (index == 0) {
          return;
        }
        if (this.list.length > 1) {
          this.list[index] = this.list.splice(
            index - 1,
            1,
            this.list[index]
          )[0];
        }
      }
      if (type == "down") {
        if (index == this.list.length - 1) {
          return;
        }
        if (this.list.length > 1) {
          this.list[index] = this.list.splice(
            index + 1,
            1,
            this.list[index]
          )[0];
        }
      }

      console.log(type, index);
    },
    // 点击添加选项卡
    addTab() {
      this.$emit("addTab");
    },
    // 点击删除选项卡
    deleteTab(index) {
      this.list.splice(index, 1);
    },
  },
  mounted() {},
};
</script>


<style lang="scss" scoped>
.tabListControl {
  width: 100%;
  .control-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 0 12px 0;
    font-size: 12px;
    font-weight: 400;
    color: #000000;
    .reset {
      font-size: 12px;
      font-weight: 400;
      color: #8e8e8e;
      cursor: pointer;
      user-select: none;
    }
    p {
      margin: 0;
    }
  }
  .tabListBox {
    width: 100%;
    border: 2px solid #f6f7f9;
    border-radius: 4px;
    .tabList {
      max-height: 240px;
      overflow-y: auto;
      .tabItem {
        width: 100%;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 14px;
        .tabName {
          font-size: 14px;
          color: #000;
        }
        .options {
          display: flex;
          align-items: center;
          font-size: 14px;
          i {
            cursor: pointer;
            font-size: 18px;
          }
          .sort {
            margin-right: 14px;
            display: flex;
            align-items: center;
            letter-spacing: -6px;
            i:hover {
              color: #1890fc;
            }
            .disabled:hover {
              color: #333;
              opacity: 0.35;
            }
          }
          .del:hover {
            color: #1890fc;
          }
          .disabled {
            opacity: 0.35;
          }
        }
      }
      .tabItem:hover {
        background-color: #f6f7f9;
      }
      .choosed {
        border: 1px solid #1890fc;
        background-color: #eaf5ff;
      }
      .choosed:hover {
        background-color: #eaf5ff;
      }
    }
    .tabList::-webkit-scrollbar {
      width: 2px !important;
    }
    .tabList::-webkit-scrollbar-track {
      /*滚动条里面轨道*/
      box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
      border-radius: 10px;
      background: #ededed;
    }
    .addTab {
      cursor: pointer;
      width: 100%;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-top: 1px solid #f6f7f9;
      font-size: 14px;
      color: #1890fc;
      font-weight: 600;
      i {
        margin-right: 6px;
      }
    }
  }
}
</style>